<template>
	<view class="af">
		<view style="flex: 1;">
			<view class="box">
				<view class="add_adress">
					<view class="add_adress_item">
						<view class="add_adress_title">收货人</view>
						<input type="text" v-model="content.name" placeholder="请输入收货人" placeholder-class="place" />
					</view>
				</view>
				<view class="add_adress">
					<view class="add_adress_item">
						<view class="add_adress_title">手机号码</view>
						<input type="number" @blur="check" v-model="content.mobile" placeholder="请填写手机号码" placeholder-class="place" />
					</view>
				</view>
				<view class="add_adress" @tap="choosecity">
					<view class="add_adress_item">
						<view class="add_adress_title">收货地址</view>
						<input type="text" v-model="address" disabled="true" placeholder="点击选择收货地址" placeholder-class="place" />
					</view>
					<i class=" icon ">&#xe637;</i>
				</view>
				<view class="add_adress">
					<view class="add_adress_item">
						<view class="add_adress_title">详细地址</view>
						<input type="text" v-model="content.address" placeholder="例:xxx号楼xxx室" placeholder-class="place" />
					</view>
				</view>
				<view class="add_adress">
					<view class="add_adress_item">
						<view class="add_adress_title add_adress_title_default">设为默认地址</view>
					</view>
					<switch color="#6BCC03" style="transform:scale(0.7)" :checked="status" @change="checkedSta"/>
				</view>

			</view>
		</view>

		<view class="save" @tap="submit">保存</view>
		<!-- 删除收货地址 -->
		<view class="delet" @tap="delte">
			删除收货地址
		</view>
		<w-picker mode="region" :defaultVal="moreAdd" :areaCode="['33', '3301', '330108']" :hideArea="false"
		 @confirm="onConfirm" ref="region" themeColor="#f00"></w-picker>
		 <shop-loading v-if="shopLoad"></shop-loading>
	</view>
</template>

<script>
	import wPicker from '@/components/w-picker/w-picker.vue';
	import {addressEdit,addressEditDo,addressDel} from '@/common/index.js';
	export default {
		components: {
			wPicker
		},
		data() {
			return {
				content: {},
				screenHeight: 0,
				id:'',
				address:'',
				moreAdd:[],
				status:false,
				shopLoad:true
			};
		},
		onLoad(ops) {
			this.id = ops.id;
			this.getData()
		},
		methods: {
			checkedSta(e){
				let check = e.detail.value;
				this.status = check;
				this.content.status = check ? 1 : 0
			},
			getData(){
				this.shopLoad = true;
				addressEdit({id:this.id}).then(res=>{
					if(res.code == 1){
						this.content = res.msg;
						this.moreAdd = [res.msg.province,res.msg.city,res.msg.area];
						this.address = res.msg.province+res.msg.city+res.msg.area;
						this.status = res.msg.status ? true : false;
						this.shopLoad = false;
					}else{
						this.toast(res.msg);
						this.shopLoad = false;
					}
				}).catch()
			},
			choosecity() {
				this.$refs.region.show()
			},
			onConfirm(e) {
				this.address = e.result;
				this.content.province = e.checkArr[0];
				this.content.city = e.checkArr[1];
				this.content.area = e.checkArr[2];
			},
			check() {
				let mobile = this.content.mobile;
				if (!/^1[3456789]\d{9}$/.test(mobile)) {
					this.toast('手机号格式不对')
					this.content.mobile = ''
					return false
				}
			},
			submit(){
				const {name,mobile,province,city,area,address,status} = this.content;
				// console.log(name,phone,province,city,area,adress,status)
				if(!name){
					this.toast('请填写收货人!')
					return false;
				}
				if(!mobile){
					this.toast('请填写手机号!')
					return false;
				}
				if(!this.address){
					this.toast('请选择地址!')
					return false;
				}
				if(!address){
					this.toast('请填写详情地址!')
					return false;
				}
				uni.showLoading({
					title: '正在修改地址中'
				})
				addressEditDo(this.content).then(res=>{
					if(res.code == 1){
						this.toast(res.msg);
						setTimeout(() => {
							uni.navigateBack({
								delta:1
							})
							uni.hideLoading()
						}, 2000)
					}else{
						this.toast(res.msg);
						uni.hideLoading()
					}
				}).catch()
			},
			delte(){
				let id = this.content.id;
				addressDel({id:id}).then(res=>{
					if(res.code == 1){
						this.toast(res.msg);
						setTimeout(() => {
							uni.navigateBack({
								delta:1
							})
						}, 2000)
					}else{
						this.toast(res.msg);
						
					}
				})
			}
		}
	};
</script>

<style>
	page {
		background-color: #f9f9f9;
		height: 100%;
	}
</style>
<style lang="less" scoped>
	uni-page-body{
		height:100%;
	}
	.af{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		overflow-x: hidden;
		width: 100%;
		height: 100%;
	}
	.box {
		width: 100%;
		background-color: #ffffff;
		padding: 0 30upx;
		box-sizing: border-box;
	}

	.add_adress {
		width: 100%;
		height: 118upx;
		border-bottom: 2upx solid #f9f9f9;
		display: flex;
		align-items: center;
		justify-content: space-between;

		.add_adress_item {
			display: flex;
			align-items: center;

			input {
				font-size: 28upx;
				color: #333333;
				width: 520upx;
			}

			.add_adress_title {
				width: 140upx;
				font-size: 28upx;
				color: #333;
			}

			.add_adress_title_default {
				width: 200upx;
			}
		}

		.icon {
			font-size: 28upx;
			color: #999;
		}
	}

	.add_adress:last-child {
		border-bottom: none;
	}

	.delet {
		width: calc(100% - 60upx);
		height: 90upx;
		font-size: 32upx;
		color: #333333;
		text-align: center;
		line-height: 90upx;
		background-color: #FFFFFF;
		margin: 30upx auto;
		border-radius: 16upx;
	}

	.save {
		width: calc(100% - 60upx);
		height: 90upx;
		margin: 30upx auto;
		background: #FF2842;
		border-radius:16upx;
		font-size: 32upx;
		color: #ffffff;
		text-align: center;
		line-height: 90upx;
	}
</style>
